<template>
  <div class="curve">
    <el-button type="info" style="margin-bottom:20px;" @click="goBack">返回</el-button>
    <el-tabs id="el-tab" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="温度曲线" name="3">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="电压曲线" name="1">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="电流曲线" name="2">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="总功率曲线" name="4">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="各路功率曲线" name="5">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
    </el-tabs>
    <div id="eschars"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "../../utils/esresize";
import { historyCurve } from "../../utils/api";
export default {
  data() {
    return {
      activeName: "3",
      myChart: null,
      // 设备id
      deviceId: "",

      //   开始时间
      startTime: "",
      //   结束时间
      endTime: "",
      //   uuid
      uuid: "",
      // 没有数据的图片地址
      nodatasrc: "",
      until: "",
    };
  },
  mounted() {
    this.handlergetCurve(this.activeName);
  },
  methods: {
    handleClick(tab, event) {
      this.handlergetCurve(tab.name);
    },
    // 曲线的数据
    handlergetCurve(type) {
      const node = document.getElementById("eschars");
      this.myChart = echarts.init(node);
      this.myChart.clear();
      const paramas = {
        uuid: this.uuid,
        monitorType: Number(type),
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.postRequest(historyCurve, paramas).then(res => {
        if (res.code == 200) {
          const result = res.data;
          const color = ["#a048ff", "#0077f8", "#e5482c"];
          let series = [];
          let curveName = [];
          let resultArr = [];
          this.nodatasrc = "";
          if (
            !result ||
            result === "" ||
            result === null ||
            result.length === 0
          ) {
            curveName = [];
            series = [];
            this.nodatasrc = require("../../assets/images/zh/nodata.png");
            this.myChart.dispose();
          } else {
            //循环对象 返回的结果是数组
            resultArr = Object.values(result.curve);

            //循环数组 拿到 名字
            curveName = resultArr.map(v => v.name);
          }
          //循环数组 拿到不同的温度
          for (let i = 0; i < resultArr.length; i++) {
            this.until = resultArr[i].unit;
            series.push({
              name: resultArr[i].name,
              type: "line",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: color[i]
                  }
                }
              },
              markPoint: {
                data: [{ type: "max", name: "最大值" }],
                symbol: "pin",
                itemStyle: {
                  color: color[i]
                }
              },
              data: resultArr[i].data,
              symbol: "none", //这句就是去掉点的
              smooth: true //这句就是让曲线变平滑的
            });
          }
          const option = {
            tooltip: {
              trigger: "axis",
               formatter: params => {
                 console.log(params)
                const arr = params.map(
                  // "<br />"+
                  v => v.axisValue + v.seriesName + ":" + v.value + this.until
                );
                return arr.join("<br/>");
              }
            },
            color,
            legend: {
              left: "50",
              data: curveName
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            toolbox: {
              iconStyle: {
                color: "#a048ff"
              }
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: result.time
            },
            yAxis: {
              type: "value"
            },
            series
          };
          this.myChart.setOption(option);
          const listener = () => {
            this.myChart.resize();
          };
          EleResize.on(node, listener);
        }
      });
    },
    goBack() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/particulars");
      });
      window.sessionStorage.removeItem("OffInfo");
    }
  },
  destroyed() {
    this.myChart = null;
  },
  created() {
    const OffInfo = JSON.parse(window.sessionStorage.getItem("OffInfo"));
    this.deviceId = OffInfo.id;
    this.startTime = OffInfo.startTime;
    this.endTime = OffInfo.endTime;
    this.uuid = OffInfo.uuid;
  }
};
</script>

<style lang="less" scoped>
.curve {
  #eschars {
    width: 80%;
    height: 350px;
    margin-left: 30px;
    margin-bottom: -150px;
  }
  // #eschars2 {
  //   width: 80%;
  //   height: 400px;
  //   margin-left: 30px;
  //   margin-bottom: 30px;
  // }
  // #eschars3 {
  //   width: 80%;
  //   height: 400px;
  //   margin-left: 30px;
  //   margin-bottom: 30px;
  // }
  #el-tab {
    margin-left: 30px;
  }
  .nodataImg {
    margin-top: 3%;
    margin-left: 35%;
  }
}
</style>
